<template class='login1'>
  <div class="login">
    <div class="login_box">
      <div class="el-text">活码后台管理系统</div>
      <el-form :model="form" label-width="100px" class="form" ref="form">
        <el-form-item label="用户名称" required prop="username">
          <el-input prefix-icon="el-icon-s-custom" style="width:90%;" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" required prop="password">
          <el-input
            prefix-icon="el-icon-s-cooperation"
            style="width:90%;"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="submit('form')">登录</el-button>
        <el-button type="info" @click="formreset('form')">重置</el-button>
      </el-form>
    </div>
    <particles-bg type="lines" :bg="true" />
  </div>
</template>
<script>
import { login } from "../axios/api";
import { currentRoutes } from "../router/index.js";
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    //登录请求
    submit(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          try {
            const res = await login(this.form);
            if (!res) return;
            if (res.status == 201) {
              this.$message({
                showClose: true,
                message: "登录成功",
                type: "success",
              });
              sessionStorage.setItem("username", res.data.username);
              sessionStorage.setItem("token", "Bearer " + res.data.token);
              currentRoutes();
              this.$router.push("/layout");
            }
          } catch (error) {
            this.$message({
              showClose: true,
              message: "账号或密码错误,登录失败",
              type: "error",
            });
          }
        } else {
          return false;
        }
      });
    },
    formreset(form) {
      this.$refs[form].resetFields();
    },
    watchEnter(e) {
      var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
      if (keyNum == 13) {
        this.submit("form");
      }
    },
  },
  created() {
    document.addEventListener("keydown", this.watchEnter);
  },
};
</script>
<style lang="less" scoped>
.el-text {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin-top: 30px;
}
.login {
  height: 100%;
  width: 100%;
  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1111;
    transform: translate(-50%, -50%);
    .login_avatar {
      width: 130px;
      height: 130px;
      border: 1px solid #ccc;
      border-radius: 50%;
      padding: 10px;
      position: absolute;
      left: 50%;
      background-color: #fff;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px #ddd;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid #eee;
        background-color: #fff;
      }
    }
    .form {
      margin-top: 40px;
      text-align: center;
    }
  }
}
</style>